<template>
  <div>
    <div v-if="fieldType===4">
      <RadioGroup  v-model="selectedOption">
        <Radio :label="0">单选</Radio>
        <Radio :label="1">多选</Radio>
      </RadioGroup>
    </div>
    <div v-for="(option, index) in options" :key="option.value">
      <Row :gutter="32" prop="control" class="code-row-bg">
        <Col span="14">
          <Input type="text" :maxlength="30" v-model="option.text" placeholder="请输入"></Input>
        </Col>
        <Col span="4">
          <Icon type="ios-trash-outline" color="#f89c34" size="22" @click="removeOption(index)" />
        </Col>
      </Row>
    </div>
    <div class="btn">
      <RPButton @click="addOption" text="添加选项"></RPButton>
      <RPButton @click="handleImportBu" text="快速导入单位"></RPButton>
    </div>
  </div>
</template>

<script>
import ImportBu from './ImportBU.vue'
export default {
  data() {
    return {
      options: [
        {
          text: "选项1",
          value: '1'
        },
        {
          text: "选项2",
          value: '2'
        },
        {
          text: "选项3",
          value: '3'
        }
      ],
      selectedOption: 0
    }
  },
  props: {
    fieldType: {
      type: Number,
      default: 3
    },
    optionsList: {
      type: Array,
      default: () => []
    },
    selection: {
      type: Number,
      default: 1
    }
  },
  methods: {
    addOption() {
      this.options.push({ text: '', value: (this.options.length + 1).toString() })
    },
    removeOption(index) {
      this.options.splice(index, 1)
    },
    handleImportBu() {
      new this.$pageModal(
        ImportBu,
        {
          props: {
          },
          
        },
        data => {
          if (data && data.length) {
            this.options = data
          }
        }
      );
    },
  },
  created() {
    if (this.optionsList.length) {
      this.options = this.optionsList
    }
    if (this.fieldType === 4) {
      this.selectedOption = this.selection
    }
  }
}
</script>

<style lang="less" scoped>
.btn {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  button {
    width: 120px;
  }
}
</style>